
.author{
  position: relative;
  .flexbox();
  padding-top: 61.866667%;

  .info-back,
  .info-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .info-back {
    z-index: 0;
  }

  .info-box {
    z-index: 5;
    color: @white;
    padding-top: (60/@font-size-base)*1rem;
    box-sizing: border-box;
  }

  .avatar-box {
    width: 100%;
    height: auto;
    text-align: center;
    .avatar {
      display: inline-block;
      vertical-align: middle;
      width: (83/@font-size-base)*1rem;
      height: (83/@font-size-base)*1rem;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .user-info {
    width: 100%;
    text-align: center;
    color: @white;
    h3 {
      display: inline-block;
      vertical-align: middle;
      margin: (5/@font-size-base)*1rem 0 (10/@font-size-base)*1rem;
      font-weight: normal;
      font-size: (14/@font-size-base)*1rem;
    }
    span,em {
      font-style: normal;
      font-size: (12/@font-size-base)*1rem;
    }
  }

  .user-face {
    .flexbox();
    width: 100%;
    .justify-content(center);

    em {
      display: inline-block;
      vertical-align: middle;
      padding: 0 (20/@font-size-base)*1rem;
    }

    span {
      .flexbox();
      flex: 1;
      &.text-left {
        .justify-content(flex-start);
      }
      &.text-right {
        .justify-content(flex-end);
      }
    }

  }

}

// 个人中心顶上内容
.my-well {
  position: relative;
  .flexbox();
  padding-top: (210/@font-size-base)*1rem;

  .info-back,
  .info-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .info-back {
    z-index: 0;
  }

  .info-box {
    z-index: 5;
    color: @white;
    padding-top: (60/@font-size-base)*1rem;
    box-sizing: border-box;
  }

  .avatar-box {
    width: 100%;
    height: auto;
    text-align: center;
    .avatar {
      display: inline-block;
      vertical-align: middle;
      width: (83/@font-size-base)*1rem;
      height: (83/@font-size-base)*1rem;
      border-radius: 50%;
      overflow: hidden;
      border: (2/@font-size-base)*1rem solid @white;
    }
  }
  .user-info {
    width: 100%;
    text-align: center;
    color: @white;
    h3 {
      display: inline-block;
      vertical-align: middle;
      margin: (5/@font-size-base)*1rem 0 (10/@font-size-base)*1rem;
      font-weight: normal;
      font-size: (14/@font-size-base)*1rem;
    }
    span,em {
      font-style: normal;
      font-size: (12/@font-size-base)*1rem;
    }
  }
}

// 注册页面的头像内容
.reg-avatar{
  position: relative;
  .flexbox();
  flex-direction: column;
  .justify-content(center);
  .align-items(center);
  background: @white;
  width: 100%;
  box-sizing: border-box;
  padding: (30/@font-size-base)*1rem (10/@font-size-base)*1rem;

  .avatar-box {
    display: block;
    position: relative;
    width: (70/@font-size-base)*1rem;
    height: (70/@font-size-base)*1rem;
    border-radius: 50%;
    img{
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      z-index: 1;
      box-sizing: border-box;
    }
    i {
      position: absolute;
      top: auto;
      right: 0;
      bottom: 0;
      left: auto;
      display: inline-block;
      vertical-align: middle;
      width: (24/@font-size-base)*1rem;
      height: (24/@font-size-base)*1rem;
      background: url("../../images/reg_avatar_icon.png") no-repeat;
      background-size: cover;
      z-index: 5;
    }
  }
  .text-box {
    margin-top: (15/@font-size-base)*1rem;
    font-size: (13/@font-size-base)*1rem;
    color: #e1e1e1;
  }
}